<!DOCTYPE html>
{% load static %}
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>个人中心</title>
    <link rel="icon" type="image/x-icon" href="{% static 'favicon.ico' %}">
    <link rel="stylesheet" href="{% static 'base/css/bulma.css' %}" />
    <link rel="stylesheet" href="{% static 'base/css/style.css' %}" />
    <link rel="stylesheet" href="{% static 'base/css/all.min.css' %}" />
    <script src="{% static 'base/js/all.min.js' %}"></script>
  </head>
  <body>


    <header>
      <nav class="navbar" role="navigation" aria-label="main navigation">
        <div class="container">
          <div class="navbar-brand">
            <a class="navbar-item" href="/">
              <img src="{% static 'images/logo.jpg' %}" />
            </a>
          </div>

          <div id="navbarBasicExample" class="navbar-menu">
            <div class="navbar-end">
              <div class="navbar-item">
                <div class="dropdown is-hoverable">
                  <div class="dropdown-trigger">
                    <button class="button is-white">
                      <figure class="image is-24x24 avatar">
                        {% if user.userprofile.image %}
                        <img
                          class="is-rounded"
                          src="{{ MEDIA_URL }}{{ user.userprofile.image }}"
                          alt="User Image"
                        />
                        {% else %}
                        <img
                          class="is-rounded"
                          src="{{ MEDIA_URL }}upload/users/default_avatar.jpg"
                          alt="Default User Image"
                        />
                        {% endif %}
                      </figure>

                      &nbsp;&nbsp; {% if user.userprofile.nike_name %}
                      <span class="has-text-grey-dark"
                        >{{ user.userprofile.nike_name }}</span
                      >
                      {% else %}
                      <span class="has-text-grey-dark"
                        >{{ user.username }}</span
                      >
                      {% endif %}
                      <span class="icon is-small">
                        <i class="fas fa-angle-down" aria-hidden="true"></i>
                      </span>
                    </button>
                  </div>

                  <div class="dropdown-menu" id="dropdown-menu2" role="menu">
                    <div class="dropdown-content is-shadowless">
                      <div class="dropdown-item">
                        <a class="has-text-grey-dark" href="">
                          <span class="icon is-small">
                            <i
                              class="fas fa-user-cog"
                              aria-hidden="true"
                            ></i> </span
                          >&nbsp;&nbsp;
                          <a href="{% url 'users:editor_users' %}">账号设置</a>
                        </a>
                      </div>
                      <hr class="dropdown-divider" />
                      <div class="dropdown-item">
                        <a
                          class="has-text-grey-dark"
                          href="{% url 'users:logout' %}"
                        >
                          <span class="icon is-small">
                            <i
                              class="fas fa-power-off"
                              aria-hidden="true"
                            ></i> </span
                          >&nbsp;&nbsp; 退出登录
                        </a>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </nav>
    </header>

    <section class="section">
      <div class="container">
        <div class="columns">
          <div class="column is-2">
            <div class="card">
              <header class="card-header">
                <p class="card-header-title">个人中心</p>
                <a href="" class="card-header-icon" aria-label="more options">
                  <span class="icon">
                    <i class="fas fa-angle-down" aria-hidden="true"></i>
                  </span>
                </a>
              </header>
              <div class="card-content menu">
                <ul class="content menu-list">
                  <li>
                    <a href="{% url 'users:user_profile' %}" class="is-active">
                      <span class="icon-text">
                        <span class="icon">
                          <i class="fas fa-user"></i>
                        </span>
                        <span>用户信息</span>
                      </span>
                    </a>
                  </li>
                </ul>
              </div>
            </div>

            <div class="card" style="margin-top: 20px;">
              <header class="card-header">
                <p class="card-header-title">内容管理</p>
                <a href="#" class="card-header-icon" aria-label="more options">
                  <span class="icon">
                    <i class="fas fa-angle-down" aria-hidden="true"></i>
                  </span>
                </a>
              </header>

              <div class="card-content menu">
                <ul class="content menu-list">

                  <li><a href="{% url 'users:create_post' %}">
                    <span class="icon-text">
                      <span class="icon">
                        <i class="fas fa-solid fa-pen"></i>
                      </span>
                      <span>添加文章</span>
                    </span>
                  </a></li>
                  
                  <li><a href="{% url 'users:article_list' %}">
                    <span class="icon-text">
                      <span class="icon">
                        <i class="fas fa-solid fa-inbox"></i>
                      </span>
                      <span>文章管理</span>
                    </span>
                  </a></li>
<!-- 
                  <li><a href="">
                    <span class="icon-text">
                      <span class="icon">
                        <i class="fas fa-solid fa-comment"></i>
                      </span>
                      <span>评论管理</span>
                    </span>
                  </a></li> -->
                  
                </ul>
              </div>
            </div>
          </div>

          <div class="column is-10">
            <div class="box is-radiusless is-shadowless">
              <div class="tabs">
                <ul>
                  {% block title %}
                  <li class="is-active"><a>账号信息</a></li>
                  {% endblock %}
                </ul>
              </div>

              {% block content %}
              <div
                class="columns is-mobile"
                style="border-bottom: #ededed solid 1px; padding-bottom: 1rem"
              >
                <div class="column is-narrow">
                  <figure class="image is-96x96 avatar">
                    {% if user.userprofile.image %}
                    <img
                      class="is-rounded"
                      src="{{ MEDIA_URL }}{{ user.userprofile.image }}"
                      alt="User Image"
                    />
                    {% else %}
                    <img
                      class="is-rounded"
                      src="{{ MEDIA_URL }}upload/users/default_avatar.jpg"
                      alt="Default User Image"
                    />
                    {% endif %}
                  </figure>
                </div>

                <div class="column is-narrow">
                  <div style="padding-top: 1.5rem">
                    {% if user.userprofile.nike_name %}
                    <h1 class="title is-size-4">
                      {{ user.userprofile.nike_name }}
                    </h1>
                    {% else %}
                    <h1 class="title is-size-4">{{ user.username }}</h1>
                    {% endif %} {% if user.userprofile.gexing %}
                    <p class="subtitle is-size-6">
                      {{ user.userprofile.gexing }}
                    </p>
                    {% else %}
                    <p class="subtitle is-size-6">暂未设置个性签名</p>
                    {% endif %}
                  </div>
                </div>

                <div class="column is-narrow-mobile">
                  <a
                    class="button is-light is-pulled-right"
                    href="{% url 'users:editor_users' %}"
                    style="margin-top: 1.8rem"
                    >修改信息</a
                  >
                </div>
              </div>

              <div class="columns" style="padding: 1rem 0">
                <div class="column is-2">
                  <p>个人信息</p>
                </div>
                <div class="column">
                  <div
                    class="columns is-mobile"
                    style="border-bottom: #ededed solid 1px"
                  >
                    <div class="column is-2">
                      <span class="has-text-grey-light">昵称</span>
                    </div>
                    <div class="column is-narrow">
                      {% if user.userprofile.nike_name %}
                      <span class="has-text-black-ter"
                        >{{ user.userprofile.nike_name }}</span
                      >
                      {% else %}
                      <span class="has-text-black-ter">暂未设置用户昵称</span>
                      {% endif %}
                    </div>
                  </div>
                  <div
                    class="columns is-mobile"
                    style="border-bottom: #ededed solid 1px"
                  >
                    <div class="column is-2">
                      <span class="has-text-grey-light">性别</span>
                    </div>
                    <div class="column is-narrow">
                      {% if user.userprofile %}
                      <span class="has-text-black-ter"
                        >{{ user.userprofile.get_gender_display }}</span
                      >
                      {% else %}
                      <span class="has-text-black-ter">暂未设置</span>
                      {% endif %}
                    </div>
                  </div>
                  <div
                    class="columns is-mobile"
                    style="border-bottom: #ededed solid 1px"
                  >
                    <div class="column is-2">
                      <span class="has-text-grey-light">邮箱</span>
                    </div>
                    <div class="column is-narrow">
                      <span class="has-text-black-ter">{{ user.email }}</span>
                    </div>
                  </div>

                  <div
                    class="columns is-mobile"
                    style="border-bottom: #ededed solid 1px"
                  >
                    <div class="column is-2">
                      <span class="has-text-grey-light">地址</span>
                    </div>
                    <div class="column is-narrow">
                      {% if user.userprofile %}
                      <span class="has-text-black-ter"
                        >{{ user.userprofile.address }}</span
                      >
                      {% else %}
                      <span class="has-text-black-ter">暂未添加地址</span>
                      {% endif %}
                    </div>
                  </div>

                  <div
                    class="columns is-mobile"
                    style="border-bottom: #ededed solid 1px"
                  >
                    <div class="column is-2">
                      <span class="has-text-grey-light">生日</span> <!-- 添加生日 -->
                    </div>
                    <div class="column is-narrow">
                      {% if user.userprofile.birthday %}
                      <span class="has-text-black-ter"
                        >{{ user.userprofile.birthday }}</span
                      >
                      {% else %}
                      <span class="has-text-black-ter">暂未添加生日</span>
                      {% endif %}
                    </div>
                  </div>
                </div>
              </div>

              <div class="columns" style="padding: 1rem 0">
                <div class="column is-2">
                  <p>个人简介</p>
                </div>
                <div class="column">
                  <div class="content">
                    {% if user.userprofile.desc %} {{ user.userprofile.desc }}
                    {% else %} 暂未设置 {% endif %}
                  </div>
                </div>
              </div>
              {% endblock %}
            </div>
          </div>
        </div>
      </div>
    </section>


  </body>
</html>
